<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>在线课程学习网站</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="all,follow">
  <link rel="stylesheet" href="vendor/swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="vendor/owl.carousel2/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="vendor/owl.carousel2/assets/owl.theme.default.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:300,400&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface&amp;display=swap">
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <link rel="stylesheet" href="css/custom.css">
</head>

<body>
  <header class="header">
    <nav
        class="navbar navbar-expand-lg navbar-light border-gray py-2 bg-light"
      >
        <div class="container">
          <button
            class="navbar-toggler navbar-toggler-right mx-auto border-0"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse text-center"
            id="navbarSupportedContent"
          >
            <ul class="navbar-nav mx-auto" style="font-size: 20px">
              <li class="nav-item px-1">
                <a class="nav-link" href="./index.html"
                  >HTML</a
                >
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./css.html">CSS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link active" href="./js.html">JS</a>
              </li>
              <li class="nav-item px-1">
                <a class="nav-link" href="./login.html">login</a>
              </li>
              <li class="nav-item px-1">
                <a
                  class="nav-link"
                  href="https://gitee.com/lover_3/final.git"
                  >Gitee</a
                >
              </li>
              <li class="nav-item px-1">
                <a
                  class="nav-link"
                  href="https://www.bilibili.com/video/BV1CR3seaEzG/"
                  >Video</a
                >
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <nav class="navbar navbar-expand-lg navbar-light bg-white py-4">
   
        </a></div>
    </nav>
  </header>
  <section class="py-5">
    <div class="container text-center">
      <p class="h6 mb-0 text-uppercase text-primary">JavaScript</p>
      <h1>js如何调用api接口数据 javascript调用api接口</h1>
      <p class="mb-3">此文引用CSDN博主的文章，前言有标注版权声明也放置原文链接。（本文章仅引用了部分，想看完整内容，请点击链接）</p>
      <ul class="list-inline small text-uppercase mb-0">
        <li class="list-inline-item align-middle">
          <img class="rounded-circle shadow-sm" src="https://logowik.com/content/uploads/images/adobe-creative-cloud6378.jpg" alt="" width="40" />
        </li>
        <li class="list-inline-item me-0 text-muted align-middle">By </li>
        <li class="list-inline-item align-middle me-0"><a class="fw-bold reset-anchor" href="https://creativecloud.adobe.com/zh-Hans">Adobe Creative Cloud</a></li>
        <li class="list-inline-item text-muted align-middle me-0">|</li>
        <li class="list-inline-item text-muted align-middle me-0">December 30, 2023</li>
      </ul>
    </div>
    <div class="container">
      <div class="row gy-5">
        <div class="col-lg-12">
          <p class="lead first-letter-styled lh-4">
            前言
            随着云计算、分布式微服务技术的发展，现有网络项目大都基于前后端分离的技术手段实施，一方面是便于缓解后台服务器的压力，充分利用各台服务节点的计算和存储资源，尽可能地提高服务器性能；另一方面可提高服务的可靠性、容灾能力，以便在某服务、节点上服务器甚至节点崩溃的情况下得以对该服务快速有效地进行替换或恢复，表现为极强的修复能力（注：先进制造技术的发展和充足的材料供应能力使得时间、价格方面的维修成本不断高于替换成本，让废旧品及时得到回收利用再生产，从而减少繁琐的维修过程，以便缩短维修时间，即能换不修原则）。
            在Web项目实施的过程中，后端工程师负责发布Web服务，提供完善的调用接口；而前端开发人员则以后台服务接口的说明文档为基础，按需调用后台API来实现数据的接收，最后利用可视化技术对数据进行炫酷展示，进而提供强大的平台功能python
            for语句用法。
            <br>
          <h4><a href="https://blog.csdn.net/chatgpt001/article/details/134706210">原文链接</a></h4>
          </p>
          <div class="px-lg-5 mb-5">
            <blockquote class="blockquote-custom">
              在Web前端开发的过程中，java
              工程师和开发人员往往需要调用后台API来获取所需数据（data），之后通过向菜单、列表、表格、文本框、按钮、下拉框等div内部控件中填充显示，从而实现网页系统的展示、查询和动态更新等目标。当然，前端开发者和后台工程师皆可通过Postman、SoapUI等软件来测试接口是否正常和能否返回数据，或者自己编写Java代码来发送http请求，最常用的非DevTools莫属。
            </blockquote>
          </div>
          <h2>一个Get实例</h2>
          <p class="text-muted mb-4">
            <a href="http://112.125.90.247:81/api/Log4Net/GetAsync?page=1&intPageSize=20">
              http://112.125.90.247:81/api/Log4Net/GetAsync?page=1&intPageSize=20</a>
            此Get类型的url是一个典型的单页查询接口，用于获取HTML文档中分页表格中第1页中的20条数据记录，
            通过修改page和intPageSize的大小然后发送Get类型的Http请求主动获取响应数据得以动态更新前端页面表格。
          </p>
          <img class="img-fluid mb-4" src="./img/123.png" alt="">
          <h3 class="mb-4">前端js调用后端API的三种方法</h3>
          <ul class="list-check text-muted text-sm mb-5">
            <li class="mb-1"> XMLHttpRequest</li>
            <li class="mb-1">jQuery和Ajax</li>
            <li class="mb-1">axios</li>
          </ul>
          <p>
            一。随着XMlHttpRequest对象的广泛采用，开发者可以快速构建如 Google Maps 和 Gmail 这样的 Web 应用程序，这些应用程序使用 XMLHttpRequest
            来获取新的地图图块或新的电子邮件，而无需重新加载整个页面。使用XMLHttpRequest的步骤为：（1）创建XMLHttpRequest对象；（2）建立http连接；（3）发送请求；（4）获取返回数据。
            Post请求与Get请求主要有两点不同：
            ①post请求需要设置请求头的格式内容：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            ②post请求参数放在send里面，即请求体。具体详情可参考mozilla-xmlhttprequest和Github上对xmlhttprequest的有关介绍。
          </p>
          <p class="mb-5">
            二。作为一个 JavaScript 库，jQuery使得JavaScript编程十分简单，拥有write less, do
            more的响亮口号，十分注重实际行动和用户体验。关于jQuery的使用，一方面，可以下载jQuery文件在html文件中进行本地引用，或者直接引用带url链接的在线jQuery.js文件；另一方面，可以使用Node包管理工具npm进行命令行安装npm
            install jquery。
          </p>
        </div>
      </div>
    </div>
  </section>
  <!-- 页脚 -->
  <footer class="bg-dark py-4">
    <div class="container">
      <div class="row py-2 gy-2">
        <div class="col-lg-4 text-center text-lg-start">
          <p class="small text-muted text-uppercase mb-0">
            &copy; 4090Ti bulc.revoledoc 版权所没有
          </p>
        </div>
        <div class="col-lg-4 text-center"></div>
        <div class="col-lg-4 text-center text-lg-end">
          <p class="small text-muted text-uppercase mb-0">
            <a target="_blank" href="https://gdga.gd.gov.cn/" title="联系我们"
              >联系我们</a
            >.
          </p>
        </div>
      </div>
    </div>
  </footer>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="vendor/swiper/swiper-bundle.min.js"></script>
  <script src="js/front.js"></script>
  <script>
    function injectSvgSprite(path) {

      var ajax = new XMLHttpRequest();
      ajax.open("GET", path, true);
      ajax.send();
      ajax.onload = function (e) {
        var div = document.createElement("div");
        div.className = 'd-none';
        div.innerHTML = ajax.responseText;
        document.body.insertBefore(div, document.body.childNodes[0]);
      }
    }
    injectSvgSprite('icons/orion-svg-sprite.svg');

  </script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</body>

</html>